<template>
  <div>
    <div>
      <el-row :gutter="20" style="line-height: 35px;">
        <el-col style="width: 280px;display: flex;">
          <div class="item_label">开票区间:</div>
          <el-date-picker type="daterange" v-model="filterData.daterange" size="mini" start-placeholder="起始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd" range-separator="至" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col style="width: 280px;display: flex;">
          <div class="item_label">发票类型:</div>
          <el-select v-model="filterData.type" placeholder="发票类型" size="mini" clearable style="width: 100%;">
            <el-option label="增值税普票" value="增值税普票"></el-option>
            <el-option label="增值税专票" value="增值税专票"></el-option>
          </el-select>
        </el-col>
        <el-col style="width: 280px;display: flex;">
          <div class="item_label">进项票号:</div>
          <el-input v-model="filterData.fphm" style="width: 100%;" placeholder="销项数电票号码或纸质发票号码" size="mini"
            clearable></el-input>
        </el-col>
        <el-col style="width: 280px;display: flex;">
          <div class="item_label">开票名称:</div>
          <el-input v-model="filterData.title" style="width: 100%;" placeholder="货物或服务名称" size="mini"
            clearable></el-input>
        </el-col>
        <el-col style="width: 280px;display: flex;">
          <div class="item_label">开票类目:</div>
          <el-input v-model="filterData.taxname" style="width: 100%;" placeholder="开票类目" size="mini"
            clearable></el-input>
        </el-col>

        <el-col style="width: 280px;display: flex;">
          <div class="item_label">规格型号:</div>
          <el-input v-model="filterData.model" style="width: 100%;" placeholder="规格型号" size="mini" clearable></el-input>
        </el-col>
        <el-col style="width: 280px;display: flex;">
          <div class="item_label">销方名称:</div>
          <el-input v-model="filterData.seller" placeholder="销售单位" clearable></el-input>
        </el-col>

        <el-col style="width: 280px;display: flex;">
          <div class="item_label">所属账套:</div>
          <el-select v-model="filterData.buyer" style="width: 100%;" size="mini" placeholder="所属账套" filterable
            clearable>
            <el-option v-for="(item,index) in accounts" :label="item.name" :value="item.name" :key="index">
            </el-option>
          </el-select>
        </el-col>

        <el-col style="width: 200px;display: flex;">
          <el-button type="primary" icon="el-icon-search" @click="currentRow=null;loadDataList()"
            size="mini">查询</el-button>
        </el-col>
      </el-row>
    </div>
    <div>
      <div style="text-align: right;">
        <div style="margin-bottom: 5px;">
          <el-dropdown split-button type="primary" size="mini" @command="handleExport">
            导出数据
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="export_check">导出选中项</el-dropdown-item>
              <el-dropdown-item command="export_all">导出全部</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="table-wraper">
        <el-table :data="talbeData" height="100%" stripe  border :cell-style="rowClass">
          <el-table-column label="" type="selection" align="center" width="60px" fixed="left"></el-table-column>
          <el-table-column label="序号" type="index" align="center"></el-table-column>
          <el-table-column label="开票日期" prop="date" width="100px" align="center"      show-overflow-tooltip></el-table-column>
          <el-table-column label="开票单位" prop="seller"  align="center" width="120px"     show-overflow-tooltip></el-table-column>
          <el-table-column label="进项票号" prop="fphm"  align="center" width="140px" show-overflow-tooltip></el-table-column>

          <el-table-column label="类型" prop="type" align="center" width="140px">
            <template v-slot="scope">
              {{scope.row.type}}({{scope.row.rate*100}}%)
            </template>
          </el-table-column>
          <el-table-column label="税收分类及名称" width="160px" show-overflow-tooltip>
            <template v-slot="scope">
              *{{scope.row.taxname}}*{{scope.row.title}}
            </template>
          </el-table-column>
          <el-table-column label="规格型号" prop="model" show-overflow-tooltip align="center"></el-table-column>
          <el-table-column label="购入" align="center">
            <el-table-column label="单位" prop="unit" width="60px" align="center"></el-table-column>
            <el-table-column label="数量" prop="count" align="center" width="80px"></el-table-column>
            <el-table-column label="单价" prop="price" align="center" width="80px"
              show-overflow-tooltip></el-table-column>
            <el-table-column label="金额" prop="sum" align="center" width="100px"></el-table-column>
          </el-table-column>
          <el-table-column label="售出" align="center">
              <el-table-column label="售出" prop="saleticket_bindcount" width="80px" align="center"></el-table-column>
              <el-table-column label="关联销项票号" prop="saleticket_bindnums" width="120px" show-overflow-tooltip align="center"></el-table-column>
          </el-table-column>
          <el-table-column label="库存">
            <el-table-column label="数量" prop="shengyu" width="80px" align="center"></el-table-column>
            <el-table-column label="金额" prop="shengyurmb" width="80px" align="center"></el-table-column>
          </el-table-column>
          <el-table-column label="所属账套" prop="buyer" show-overflow-tooltip></el-table-column>
        </el-table>
      </div>
      <div style="display: flex;">
        <div style="flex: 1; line-height: 35px;display: flex;">
          <div style="width: 150px;">本页采购总额:{{sumpage.toFixed(2)}}</div>
          <div style="width: 150px;">本页库存总额:{{sumshengyurmb.toFixed(2)}}</div>
        </div>
        <div>
          <el-pagination layout=" prev, pager,next,sizes,total" :total="numrows" :page-size="pagesize"
            :current-page="curpage" prev-text="上一页" next-text="下一页" :page-sizes="[10, 25, 30]"
            @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        filterData: {
          daterange: '',
          type: '',
          fphm: '',
          taxname: '',
          model: '',
          title: '',
          buyer: '',
          seller: ''
        },
        buyerlist: [],
        sellerlist: [],
        talbeData: [],
        curpage: 1,
        selection:[],
        pagesize: 15,
        sumshengyurmb:0,
        numrows: 20,
        sumpage:0,
      }
    },
    mounted() {
      var now= new Date();
      var firstDay=this.formatDate(new Date(now.getFullYear(),now.getMonth(),1));
      var lastDay=this.formatDate(new Date(now.getFullYear(),now.getMonth()+1,0));
      this.filterData.daterange = [firstDay,lastDay];


      this.loadBuyerList();
      this.loadAccounts();
      this.loadDataList();
    },
    methods: {
      formatDate(date) {
        const yyyy = date.getFullYear();
        const mm = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的
        const dd = String(date.getDate()).padStart(2, '0');
        return `${yyyy}-${mm}-${dd}`;
      },
      rowClass({ row, column, rowIndex, columnIndex }){
        if(columnIndex==14){
          return {background:'#ffdec5',color:'#FF0000'}
        }
      },
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
      loadDataList() {
        const params = {
          daterange: this.filterData.daterange,
          type: this.filterData.type,
          fphm: this.filterData.fphm,
          title: this.filterData.title,
          taxname: this.filterData.taxname,
          model: this.filterData.model,
          buyer: this.filterData.buyer,
          seller: this.filterData.seller,
          curpage: this.curpage,
          pagesize: this.pagesize
        };
        this.axios.post("api/admin/unsale/list", params).then(res => {
          if (res.status == 200 && res.data.code == 1) {
            this.talbeData = res.data.list;
            this.numrows = res.data.numrows;
            this.sumpage=res.data.sumpage;
            this.sumshengyurmb=res.data.sumshengyurmb;
          }
        })
      },
      loadBuyerList() {
        this.axios.post("api/admin/supplier/list").then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.buyerlist = res.data.list;
          }
        });
      },
      loadAccounts() {
        this.axios.post("api/admin/account/list").then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.accounts = res.data.list;
          }
        });
      },
      handleExport(cmd) {
        switch (cmd) {
          case "export_check":
            this.handleExportSelection();
            break;
          case "export_all":
            break;
        }
        console.log(cmd);
      },
      handleExportSelection(){

      },
      handleExportAll(){

      }

    }
  }
</script>

<style scoped>
  .item_label {
    width: 85px;
    line-height: 30px;
  }
  .table-wraper{
    height:calc( 100vh - 240px);
  }
</style>
